<template>
  <el-popover placement="bottom" width="200" trigger="hover" v-model="appPopoverVisible">
    <el-radio-group v-model="selectedTheme" size="small">
      <el-radio v-for="item in themeOptions" :key="item.value" :label="item.value">
        {{ item.label }}
      </el-radio>
    </el-radio-group>
    <template #reference>
      <el-button
        class="el-button el-button--info el-button--default is-link"
        :onClick="openDesigner"
      >
        <Icon icon="fa-solid:tools" />
        {{ props.text }}
      </el-button>
    </template>
  </el-popover>

  <el-drawer
    class="appFrame"
    size="100%"
    v-model="drawerVisible"
    :with-header="false"
    :direction="direction"
    :before-close="handleClose"
  >
    <designer-exit @exit-event="handleClose" size="small" class="appExit" />
    <iframe
      ref="frameRef"
      :id="iframeAppId"
      :src="resAddress"
      frameborder="no"
      scrolling="auto"
      style="width: 100%; height: 100%"
    ></iframe>
  </el-drawer>
</template>

<script lang="ts" setup>
import { CenterVO } from '@/api/res/ResCenter'
import { ref, watch } from 'vue'

import IFrame from '@/components/IFrame/src/IFrame.vue'

import { OperItem } from '@/api/res/ResCenter/ResActBtns'
enum OpenMethodEnum {
  newPage = 0,
  currentDrwaer = 1
}

const appPopoverVisible = ref(false)
const drawerVisible = ref(false)
const direction = ref('rtl')

const iframeAppId = computed(() => {
  return 'iframeApp_' + props.resModel.id
})
const props = withDefaults(
  defineProps<{
    text: string
    operItem: OperItem
    resModel: CenterVO
    openMethod: OpenMethodEnum
    modelValue: any
  }>(),
  {
    text: '',
    openMethod: 1,
    modelValue: ''
  }
)

const openDrawer = () => {
  drawerVisible.value = true
}
// const attrs = useAttrs()

const selectedTheme = ref('mac')
const frameRef = ref()

const baseUrl = import.meta.env.VITE_BASE_URL

// const resAddress = ref(baseUrl + `/themes/${selectedTheme.value}?` + props.resModel.id)

const resAddress = computed(() => {
  return baseUrl + `/apps/${selectedTheme.value}/index.html?` + props.resModel.id
})

const handleClose = () => {
  drawerVisible.value = false
}

// 添加 watch 监听 selectedTheme 变化
watch(selectedTheme, (newValue) => {
  debugger
  appPopoverVisible.value = false
  openDesigner()
})

// // 添加 watch 监听 selectedTheme 变化
// watch(resAddress, (newValue) => {
//   alert(newValue)
//   frameRef.value.src = newValue
// })

const updateIfamSrc = () => {
  let ifamSrc = document.getElementById(iframeAppId.value) //通过ID获取iframe对象
  if (ifamSrc) {
    ifamSrc.removeAttribute('src') //先移除上一次的src地址
    ifamSrc.setAttribute('src', resAddress.value) //更新当前地址
  }
}

const openDesigner = () => {
  if (props.openMethod == OpenMethodEnum.newPage) {
    window.open(resAddress.value, '_blank')
  } else {
    drawerVisible.value = true
  }
  updateIfamSrc()
}

const themeOptions = [
  { label: 'Mac 主题', value: 'mac' },
  { label: 'Windows 主题', value: 'win' },
  { label: 'Admin 主题', value: 'ele' }
]
</script>

<style lang="scss">
.appExit {
  position: absolute;
  left: 0;
  top: 3px;
}
.appFrame {
  .el-drawer__body {
    padding: 0;
    margin: 0;
    overflow: hidden;
  }
}
</style>
